<template>
    <div>
        <el-table :data="list" style="width: 100%">
            <el-table-column v-if="type == 1" label="姓名" prop="username"></el-table-column>
            <el-table-column label="请假理由" prop="reson"></el-table-column>
            <el-table-column label="开始时间">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        {{ dayjs(scope.row.start).format("YYYY-MM-DD HH:mm:ss") }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="结束时间">
                <template #default="scope">
                    <div style="display: flex; align-items: center">
                        {{ dayjs(scope.row.end).format("YYYY-MM-DD HH:mm:ss") }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="附件">
                <template #default="scope">
                    <div class="demo-image__preview">
                        <el-image v-if="scope.row.extend" style="width: 100px; height: 100px" :preview-teleported="true"
                            :src="'/api/' + scope.row.extend.split(',')[0]" :zoom-rate="1.2"
                            :preview-src-list="scope.row.extend.split(',').map((item: any) => '/api/' + item)"
                            fit="cover" />
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="状态">
                <template #default="scope">
                    <span v-if="scope.row.type == 1">
                        <span v-if="type == 1">
                            <el-button type="success" @click="updateType(scope.row, 2)">同意</el-button>
                            <el-button type="danger" @click="updateType(scope.row, 3)">拒绝</el-button>
                        </span>
                        <el-button type="warning" v-else>待审批</el-button>
                    </span>
                    <el-button type="success" v-if="scope.row.type == 2">已同意</el-button>
                    <el-button type="danger" v-if="scope.row.type == 3">已拒绝</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script lang='ts' setup>
import dayjs from 'dayjs';
import { updatatype } from '@/serveice/leavelist'
defineProps(['list', 'type']);
async function updateType(item: any, type: any) {
    let { data } = await updatatype({ leaveid: item._id, type });
    if (data.result.matchedCount) {
        item.type = type;
    }
}

</script>
<style lang='less' scoped>

</style>